<template>
	<view class="progressProcess">
		<view class="top">
			平台客服处理中，请耐心等待
		</view>
		<view class="content">
			<view class="problem">
				退货问题
				<view class="list">
					<view class="top">
						<view class="left">
							<text></text>
						</view>
						<view class="right">
							<view class="rightTop">
								您已申请平台介入
								<text>平台需在23小时50分内处理</text>
							</view>
							<text>您已申请平台介入，平台将尽快为您安排平台客服跟
								进处理。</text>
							<text>货物状态：已寄回</text>
							<text>退货原因：不想要了</text>
						</view>
					</view>
					<view class="listItem">
						<view class="left">
							<text></text>
						</view>
						<view class="right">
							<view class="rightTop">
								已收到您的补充留言
								<text>09-30 10:19</text>
							</view>
							<text>收到安装好测试过，发现出墨各位都不正常，有视频</text>
							<view class="images">
								<view class="" v-for="(item,index) in 5" :key="index">
									
								</view>
							</view>
						</view>
					</view>
					<view class="listItem">
						<view class="left">
							<text></text>
						</view>
						<view class="right">
							<view class="rightTop">
								平台客服处理中
								<text>09-30 10:19</text>
							</view>
							<text>卖家已上传凭证，平台客服将尽快审核处理</text>
							<view class="images">
								<view class="" v-for="(item,index) in 5" :key="index">
									
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="bot">
					全部进度
					<image src="/static/img/index/58.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="dispute">
				纠纷信息
				<view class="dispute_1">
					<view class="left">
						
					</view>
					<view class="right">
						<text>大王（GOO.N）爱璐儿elleair 婴儿适用奢润保湿面巾纸100抽*3包 大王纸</text>
						<view class="">
							<text>黑色；S</text>
							x 1
						</view>
						<text>￥198.00</text>
					</view>
				</view>
			</view>
			<view class="refund">
				<view class="top">
					退款信息
					<view class="right">
						<image src="/static/img/index/82.png" mode="widthFix"></image>
						联系卖家
					</view>
				</view>
				<view class="listItem">
					退款原因：
					<view class="">
						不想要了
					</view>
				</view>
				<view class="listItem">
					退款金额：
					<view class="">
						¥198.00
					</view>
				</view>
				<view class="listItem">
					申请时间：
					<view class="">
						2020.12.02 10:10:45
					</view>
				</view>
				<view class="listItem">
					退款编号:
					<view class="">
						74673622822222
						<image src="/static/img/index/81.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
</script>

<style lang="scss">
	.progressProcess {
		min-height: 100vh;
		background: #F4F6FA;
		>.top {
			font-size: 36rpx;
			color: #fff;
			padding: 24rpx;
			height: 231rpx;
			background: url('/static/img/index/80.png') no-repeat;
			background-size: 100% 100%;
		}
		.content{
			width:702rpx;
			margin: 0 auto;
			position: relative;
			top: -140rpx;
			.refund{
				border-radius: 24rpx;
				background: #fff;
				padding: 24rpx;
				.top{
					font-size: 32rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.right{
						padding: 8rpx 16rpx;
						border-radius: 8rpx;
						color: #1188FF;
						border: 2rpx solid #1188FF;
						display: flex;
						align-items: center;
						image{
							width: 32rpx;
							margin-right: 10rpx;
						}
					}
				}
				.listItem{
					display: flex;
					align-items: center;
					justify-content: space-between;
					color: #8C8C8C;
					margin-top: 20rpx;
					view{
						display: flex;
						align-items: center;
						image{
							width: 27rpx;
							margin-left: 21rpx;
						}
					}
				}
			}
			.dispute{
				border-radius: 24rpx;
				background: #fff;
				padding: 24rpx;
				font-size: 32rpx;
				margin:16rpx 0 ;
				.dispute_1{
					margin-top: 24rpx;
					display: flex;
					align-items: flex-start;
					.left{
						width: 150rpx;
						height: 150rpx;
						background: #ccc;
						margin-right: 24rpx;
					}
					.right{
						flex: 1;
						>text:nth-of-type(1){
							font-weight: bold;
						}
						>text:nth-of-type(2){
							font-size: 32rpx;
							color: #EB432F;
						}
						view{
							display: flex;
							justify-content: space-between;
							margin: 16rpx 0;
							text{
								color: #8C8C8C;
							}
						}
					}
				}
			}
			.problem{
				border-radius: 24rpx;
				background: #fff;
				padding: 24rpx;
				font-size: 32rpx;
				.bot{
					display: flex;
					align-items: center;
					justify-content: center;
					color: #8C8C8C;
					margin-top: 48rpx;
					image{
						width: 32rpx;
						margin-left: 10rpx;
					}
				}
				.list{
					margin-top: 32rpx;
					>view{
						display: flex;
						margin-top: 8rpx;
					}
					>view:last-child{
						.left{
							&::after{
								display: none!important;
							}
						}
					}
					.right{
						padding-bottom: 24rpx;
					}
					.left{
						position: relative;
						bottom: -12rpx;
					}
					.listItem{
						.right{
							display: flex;
							flex-direction: column;
							margin-left: 13rpx;
							flex: 1;
							>text{
								font-size: 24rpx;
								margin-top: 10rpx;
							}
						}
						.rightTop{
							display: flex;
							align-items: flex-end;
							color: #262626;
							font-size: 32rpx;
							text{
								color: #8C8C8C;
								font-size: 24rpx;
								margin-left: 10rpx;
							}
						}
						.images{
							display: flex;
							flex-wrap: wrap;
							margin-top: 10rpx;
							view{
								width: 96rpx;
								height: 96rpx;
								border-radius: 16rpx;
								background-color: #ccc;
								margin-right: 20rpx;
							}
						}
					}
					.top{
						.right{
							display: flex;
							flex-direction: column;
							margin-left: 13rpx;
							flex: 1;
							>text{
								font-size: 24rpx;
								margin-top: 10rpx;
							}
						}
						.rightTop{
							display: flex;
							align-items: flex-end;
							color: #6B64D3;
							font-size: 32rpx;
							text{
								color: #FF8C00;
								font-size: 24rpx;
								margin-left: 10rpx;
							}
						}
					}
					.left{
						display: flex;
						flex-direction: column;
						align-items: center;
						text{
							width: 18rpx;
							height: 18rpx;
							border-radius: 50%;
							background: #6B64D3;
							margin-bottom: 8rpx;
						}
						&::after{
							content: '';
							display: inline-block;
							flex: 1;
							width: 3rpx;
							border-radius: 3rpx;
							background: #6B64D3;
						}
					}
				}
			}
		}
	}
</style>